<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>键盘事件 总结</h1>
        <p>
            1.Vue中常用的按键别名: <br>
            回车 => enter<br>
            删除 => delete(捕获“删除”和“退格”键)<br>
            退出 => esc<br>
            空格 => space<br>
            换行 => tab （需要配合 @keydown.tab=方法名）<br>  
            上   => up<br>
            下   => down<br>
            左   => left<br>
            右   => right<br>

            @keyup.delete="方法名"<br>
            @keydown.enter="方法名"<br>

            <br>
            2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)<br>
            3.系统修饰键(用法特殊):ctrl、alt、shift、meta(就是键盘上的 win 键) 这几个是系统的修饰键 <br>
                (1).配合keyup使用 @keyup.ctrl="方法名":按下修饰键的同时，再按下其他键，随后释放其他键，事件（方法）才被触发。<br>
                (2).配合keydown使用 : 正常触发事件。<br>
                (3).多个按键配合使用  @keydown.ctrl.y="方法名"  //需要同时按下 ctrl+y

            4.也可以使用keyCode去指定具体的按键(不推荐) -- 推荐按键的名字 进行绑定 <br>
            5.Vue.config.keycodes.自定义键名 =键码，可以去定制按键别名
              Vue.confog.keycodes.huiche=13;


        </p>
        <h2>keyup</h2>
        <input type="text" v-model="num" @keyup="add"><br>


    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            name:"haha",
            address:"重庆",
            num:''
        },
        methods:{
            changeName(){
                this.name="哈哈"
            },
            changeAddress(){
                this.address="北京"
            },
            add(e){
                //获取键盘事件中 按下的是那个键
                console.log(e.keyCode);
                console.log(this.num);
            }
        }    
    })
</script>
</html>